<template>
  <div class="bg-[#1a2c38] w-full min-375 h-auto" id="targetElement">
    <div class="container w-full mt-4 relative">
      <div class="bgc_lingh absolute"></div>

      <div class="w-full flex justify-center flex-col">
        <div class="header_bgc"></div>
        <div class="border_ text-white">
          <div class="relative w-full">
            <div
              class="w-full flex justify-center flex-col items-center relative"
            >
              <div class="bgc_lingh2 flex justify-center pt-3">
                <div
                  class="tab bg-[#01111f] h-11 rounded-lg p-1 flex items-center"
                >
                  <div
                    class="py-1 px-4 rounded-md cursor-pointer overflow-hidden whitespace-nowrap text-overflow-ellipsis"
                    v-for="(item, index) in tab"
                    :class="index == activeTab ? 'acvtiveBgc' : ''"
                    @click="activeTabChange(index)"
                  >
                    {{ $t(item.lange) }}
                  </div>
                </div>
              </div>
              <div
                class="absolute top-[140px] flex justify-between w-full headerBgc"
                v-if="firstThreeData.length"
              >
                <div class="relative w-[224px] h-[130px]">
                  <img
                    style="z-index: 1"
                    class="w-[84px] absolute h-[84px] left-[49px] top-[26px]"
                    src="../../assets/imgs/notify-type.png"
                    alt=""
                  />
                  <div
                    class="bgc_size left-[30px] absolute w-[120px] h-[130px] bgc1 flex justify-center items-center"
                    style="z-index: 2"
                  ></div>
                  <div class="bosx_detile1 absolute top-[110px] w-[221px]">
                    <div class="mt-[46px] pl-[12px] text-center">
                      <div>{{ firstThreeData[0].user_name }}</div>
                      <div class="felx items-center">
                        {{ firstThreeData[0].bet_amount }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="relative w-[326px] h-[140px]">
                  <img
                    style="z-index: 1"
                    class="w-[84px] absolute h-[84px] left-[114px] top-[10px]"
                    src="../../assets/imgs/notify-type.png"
                    alt=""
                  />
                  <div
                    class="bgc_size left-[90px] absolute w-[120px] h-[152px] top-[-30px] bgc2 flex justify-center items-center"
                    style="z-index: 2"
                  ></div>
                  <div class="bosx_detile2 absolute top-[108px] w-[326px]">
                    <div class="mt-[32px] pl-[12px] text-center">
                      <div>
                        {{ firstThreeData[1].user_name }}
                      </div>
                      <div class="felx items-center">
                        {{ firstThreeData[1].bet_amount }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="relative w-[224px] h-[130px]">
                  <img
                    style="z-index: 1"
                    class="w-[84px] absolute h-[84px] left-[90px] top-[26px]"
                    src="../../assets/imgs/notify-type.png"
                    alt=""
                  />
                  <div
                    class="bgc_size left-[70px] absolute w-[120px] h-[130px] bgc3 flex justify-center items-center"
                    style="z-index: 2"
                  ></div>
                  <div class="bosx_detile3 absolute top-[108px] w-[221px]">
                    <div class="mt-[48px] pl-[12px] text-center">
                      <div>
                        {{ firstThreeData[2].user_name }}
                      </div>
                      <div class="felx items-center">
                        {{ firstThreeData[2].bet_amount }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-[60px] bg-[#0a1f2d] w-full rounded-3xl headerBgc">
                <div
                  class="flex justify-between pt-8 mb-2 px-12 text-[#a0afc7]"
                >
                  <div>
                    {{ $t("page.table.nickname") }}
                  </div>
                  <div class="">
                    {{ $t("page.table.bettingamount") }}
                  </div>
                </div>
                <div
                  class="flex justify-between py-2 px-12"
                  v-for="(item, index) in dataList"
                  :key="index"
                >
                  <div class="flex items-center">
                    <div class="flex items-center">
                      <div class="mr-2 w-6 h-6">{{ item.position }}</div>
                      <img
                        src="../../assets/imgs/notify-active.png"
                        class="w-[40px] h-[40px] rounded-[20px]"
                        alt=""
                      />
                      <span class="ml-[12px]">{{ item.user_name }}</span>
                    </div>
                  </div>
                  <div>{{ item.bet_amount }}</div>
                </div>
              </div>
              <div class="mt-2 bg-[#0a1f2d] w-full rounded-3xl allTableData">
                <div
                  class="flex justify-between pt-8 mb-2 pl-12 pr-6 text-[#a0afc7]"
                >
                  <div>
                    {{ $t("page.table.nickname") }}
                  </div>
                  <div>
                    {{ $t("page.table.bettingamount") }}
                  </div>
                </div>
                <div
                  class="flex justify-between items-center py-2 px-8"
                  v-for="(item, index) in [...firstThreeData, ...dataList]"
                  :key="index"
                >
                  <div class="flex items-center">
                    <div class="flex items-center">
                      <div class="w-6 h-6">{{ item.position }}</div>
                      <img
                        src="../../assets/imgs/notify-active.png"
                        class="w-[40px] h-[40px] rounded-[20px]"
                        alt=""
                      />
                      <span class="ml-[12px]">{{ item.user_name }}</span>
                    </div>
                  </div>
                  <div class="">{{ item.bet_amount }}</div>
                </div>
              </div>
            </div>
            <!-- <div class="absolute top-1">7878</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Tools">
import { ref, onMounted } from "vue";
import { getBetRankingUser } from "@/api/theCharts.js";

const tab = ref([
  { name: "日榜", lange: "layer.theCharts.day", type: "day" },
  { name: "周榜", lange: "layer.theCharts.WeeklyList", type: "week" },
  { name: "月榜", lange: "layer.theCharts.MonthlyChart", type: "month" }
]);
const activeTab = ref(0);

const dataList = ref([]);
const untArrList = ref([]);
const firstThreeData = ref([]);
const date_type = ref("day");
const getBetRankingUserData = () => {
  getBetRankingUser({
    date_type: date_type.value,
    mock: 1
  }).then(res => {
    if (res.errno == 0) {
      dataList.value = res.data;

      firstThreeData.value = res.data.slice(0, 3); // 获取前三个元素
      dataList.value = res.data.slice(3); // 获取剩余元素
    }
  });
};

onMounted(() => {
  getBetRankingUserData();
});

const activeTabChange = index => {
  activeTab.value = index;
  date_type.value = tab.value[index].type;
  getBetRankingUserData();
};
</script>
<style scoped lang="less">
.border_ {
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  padding-top: 0px;
  border: 1px solid #fbeab7;
}

.header_bgc {
  width: 620px;
  height: 131px;
  margin: 0 auto;
  background-image: url("@/assets/imgs/header_bgc.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}

.bgc_lingh {
  width: 100%;
  height: 268px;
  margin: 0 auto;
  background-image: url("@/assets/imgs/light-1.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}
.bgc_lingh2 {
  width: 100%;
  height: 308px;
  background-image: url("@/assets/imgs/light-2.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}
.acvtiveBgc {
  background: #132835;
}
.bgc_size {
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}
.bgc1 {
  background: url("@/assets/imgs/3.png");
}

.bgc2 {
  background: url("@/assets/imgs/1.png");
}

.bgc3 {
  background: url("@/assets/imgs/2.png");
}

img {
  z-index: 10;
}

.bosx_detile1 {
  height: 108px;
  background-image: url("@/assets/imgs/t-1.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}

.bosx_detile2 {
  height: 118px;
  background-image: url("@/assets/imgs/t-2.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}

.bosx_detile3 {
  height: 108px;
  background-image: url("@/assets/imgs/t-3.png");
  background-size: 100% 100%; /* 覆盖整个元素区域 */
  background-repeat: no-repeat; /* 不重复图片 */
  background-position: center; /* 居中显示 */
}

.allTableData {
  display: none;
}

@media (max-width: 600px) {
  .header_bgc {
    width: 100%;
    height: 90px;
    background-size: cover; /* 覆盖整个元素区域 */
  }

  .headerBgc {
    display: none;
  }

  .bgc_lingh2 {
    width: 100%;
    height: 100%;
  }

  .allTableData {
    display: block;
  }
}
</style>
